<!--
 * @Author: your name
 * @Date: 2021-11-30 13:41:22
 * @LastEditTime: 2023-10-17 23:59:34
 * @LastEditors: xiaodong 565071984@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /pocket/src/pagesWx/search/search.vue
-->
<template>
  <view class="main">
    <view
      v-for="(item, index) in menuContent"
      :class="['detail-content', item.parStyle ? 'parStyle' : null]"
      :key="index"
    >
      <view class="detail-titleTop" v-if="item.titleTop">
        {{ item.titleTop }}
      </view>
      <view class="detail-titleDes" v-if="item.titleDesCription">
        {{ item.titleDesCription }}
      </view>
      <view class="detail-head" v-if="item.title">
        {{ item.title }}
      </view>
      <view :class="['detail-content-inner']" v-if="item.content">
        {{ item.content }}
      </view>

      <view class="detail-sub-content" v-if="item.subContent">
        {{ item.subContent }}
      </view>

      <view class="detail-list">
        <view
          class="list-item"
          v-for="(itemInner, indexInner) in item.list"
          :key="indexInner"
        >
          <view class="list-itemhori">
            <view class="list-item-head" v-if="itemInner.head">
              {{ `${indexInner + 1}、${itemInner.head}` }}
            </view>
            <View v-if="itemInner.key === 'file'">
              <u-image
                :src="require(`@/assets/images/file.png`)"
                width="40px"
                height="40px"
                @click="goToDetailFile()"
              ></u-image
            ></View>
          </view>

          <view class="list-item-subscrice" v-if="itemInner.subscrice">
            {{ `${itemInner.subscrice}` }}
          </view>
          <view class="list-item-subscrice" v-if="itemInner.content">
            {{ `${itemInner.content}` }}
          </view>
          <view class="list-item-subscrice" v-if="itemInner.content1">
            {{ itemInner.content1 }}
          </view>
          <view class="list-item-subscrice" v-if="itemInner.subContent">
            {{ `${itemInner.subContent}` }}
          </view>
          <view class="list-item-dot" v-if="itemInner.dot">
            <view class="dot"></view>
            <view class="dot-name">
              {{ `${itemInner.dot}` }}
            </view>
          </view>
          <view class="list-table" v-if="itemInner.hasTable">
            <view
              :border="true"
              stripe
              class="h-table"
              v-if="itemInner.tableKey === '会议费'"
            >
              <view class="h-tr h-tr-5 h-thead">
                <view class="h-td">会议类别</view>
                <view class="h-td">住宿费</view>
                <view class="h-td">伙食费</view>
                <view class="h-td">其他费用</view>
                <view class="h-td">合计</view>
              </view>
              <view class="h-tr h-tr-5">
                <view class="h-td">业务会议(国内)</view>
                <view class="h-td">350</view>
                <view class="h-td">150</view>
                <view class="h-td">100</view>
                <view class="h-td">600</view>
              </view>
              <view class="h-tr h-tr-5">
                <view class="h-td">业务会议(国外)</view>
                <view class="h-td">600</view>
                <view class="h-td">250</view>
                <view class="h-td">150</view>
                <view class="h-td">1000</view>
              </view>
              <view class="h-tr h-tr-5">
                <view class="h-td">管理会议</view>
                <view class="h-td h-td-colspan">320 </view>
                <!-- <view class="h-td"></view>
                <view class="h-td"></view>
                <view class="h-td"></view> -->
              </view>
            </view>
            <view
              :border="true"
              stripe
              class="h-table"
              v-if="itemInner.tableKey === '师资费'"
            >
              <view class="h-tr h-tr-5 h-thead">
                <view class="h-td">培训类别</view>
                <view class="h-td">住宿费</view>
                <view class="h-td">伙食费</view>
                <view class="h-td">场地费、资料费、交通费</view>
                <view class="h-td">其他费用</view>
                <view class="h-td">合计</view>
              </view>
              <view class="h-tr h-tr-5">
                <view class="h-td">一类培训（厅局级人员）</view>
                <view class="h-td">360</view>
                <view class="h-td">150</view>
                <view class="h-td">70</view>
                <view class="h-td">20</view>
                <view class="h-td">600</view>
              </view>
              <view class="h-tr h-tr-5">
                <view class="h-td">二类培训（处级人员）</view>
                <view class="h-td">300</view>
                <view class="h-td">130</view>
                <view class="h-td">50</view>
                <view class="h-td">20</view>
                <view class="h-td">500</view>
              </view>
              <view class="h-tr h-tr-5">
                <view class="h-td">三类培训（科级及以下人员）</view>
                <view class="h-td">270</view>
                <view class="h-td">130</view>
                <view class="h-td">30</view>
                <view class="h-td">20</view>
                <view class="h-td">450</view>
              </view>
            </view>
          </view>
          <ul class="list-dot" v-if="itemInner.dotList">
            <li
              class="dot-item"
              v-for="(itemDot, indexDot) in itemInner.dotList"
              :key="indexDot"
            >
              <span class="dot"></span>
              <span class="dot-name">
                {{ itemDot.title }}
              </span>
            </li>
          </ul>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import OnlyData from '@/data/onlyOne/onlyOne.json';
import { mapState } from 'vuex';
export default {
  components: {
    // mpHtml,
  },
  props: {
    // options: {
    //   type: Object,
    //   default: null,
    // },
  },
  computed: {
    ...mapState(['detailData', 'subDetailData', 'menuType']),
  },
  data() {
    return {
      OnlyData: OnlyData.menu,
      menuContent: [],
    };
  },
  onLoad(options) {},
  created() {},
  onShow() {
    this.initPage();
  },
  onShareAppMessage(res) {},
  methods: {
    goToDetailFile() {
      const fileUrl =
        'https://smart-light-device.oss-cn-hangzhou.aliyuncs.com/%E5%B7%AE%E6%97%85%E8%B4%B9.pdf';
      uni.downloadFile({
        url: fileUrl,
        success: function (res) {
          var filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              console.log('打开文档成功');
            },
          });
        },
      });
      // const url = 'pages/detail/fileDetail';
      // this.$u.route({
      //   url,
      //   params: {
      //     title: '',
      //   },
      // });
    },
    goToDetail() {},
    initPage() {
      const detailData = this.detailData?.data || '';
      const subDetailData = this.subDetailData?.data || '';
      const menuType = this.menuType;
      // item.subMenu === '薪酬劳务' || item.subMenu === '科研报销'

      const menuContent =
        menuType === 2 ? subDetailData?.subContent : detailData?.menuContent;
      this.menuContent = menuContent || [];
      // console.log(this.detailData, '页面数据', menuContent);
      uni.setNavigationBarTitle({
        title: menuType === 2 ? subDetailData?.title : detailData?.subMenu,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/* 引入表格样式表 */
@import '@/assets/style/helang-table.scss';
.main {
  padding-bottom: 40px;
}

.detail-content {
  margin: 12px;

  .detail-titleTop {
    font-size: 16px;
    font-weight: 800;
    margin: 6px 0 12px 0;
    // text-indent: 1em;
    line-height: 24px;
    // color: #2196f3;
  }
  .detail-titleDes {
    font-size: 16px;
    font-weight: 800;
    margin: 6px 0 12px 0;
    // text-indent: 1em;
    line-height: 24px;
    // color: #2196f3;
  }

  .detail-head {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 6px 0;
  }
  .detail-content-inner {
    margin-left: 12px;
  }

  .detail-sub-content {
    margin-left: 12px;
  }
  .detail-list {
    padding: 0 0 6px 0;
    .list-item {
      .list-itemhori {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .list-item-head {
        padding: 4px 0;
        font-size: 14px;
        line-height: 24px;
        // font-weight: 600;
      }
      .list-item-subscrice {
        padding: 4px 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
      }
      .list-item-dot {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .dot {
          display: inline-flex;
          width: 8px;
          height: 8px;
          border-radius: 4px;
          background: #000;
          margin-right: 6px;
        }
      }
      .list-table {
        margin: 6px 0;
      }
      .list-dot {
        .dot-item {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: flex-start;
          margin: 0 0 6px 6px;
          .dot {
            display: inline-flex;
            width: 8px;
            height: 8px;
            border-radius: 4px;
            background: #000;
            margin-top: 6px;
          }
          .dot-name {
            padding-left: 12px;
            display: inline-flex;
            max-width: 90%;
          }
        }
      }
    }
  }
}
.parStyle {
  margin-bottom: 22px;
}
</style>
